<template>
  <div class="search-main">
    <el-input
      v-model="searchText"
      @keyup.enter="searchLocation"
      placeholder="搜索地点"
      style="width: 300px; margin-right: 10px;"
    />
    <el-button @click="searchLocation">搜索</el-button>
    <el-card v-show="showSearchPanel" class="search-panel" @mouseleave="hideSearchPanel">
      <ul>
        <li
          v-for="poi in pois"
          :key="poi.id"
          @click="setCenter(poi.location)"
        >
          <div>
            <p><strong>{{ poi.name }}</strong></p>
            <p>{{ poi.address }}</p>
          </div>
        </li>
      </ul>
    </el-card>
  </div>
  <div id="container"></div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, onMounted } from "vue";
import { ElInput, ElButton, ElCard, ElList, ElListItem, ElImage } from 'element-plus';

let map = null;
let placeSearch = null;
let geocoder = null;
let infowindow = null;

const showSearchPanel = ref(false);
const searchText = ref("");
const pois = ref([]);

window._AMapSecurityConfig = {
  securityJsCode: "785a59dc437c9d38ba71d994c5d55b6e",
};

onMounted(() => {
  AMapLoader.load({
    key: "32f5e32440c80b075223b0f5512b294f",
    version: "2.0",
    plugins: ["AMap.Scale", "AMap.PlaceSearch", "AMap.Geocoder"],
  }).then((AMap) => {
    map = new AMap.Map("container", {
      viewMode: "2D",
      zoom: 11,
      center: [116.397428, 39.90923],
    });

    placeSearch = new AMap.PlaceSearch({
      city: "0",
      panel: "",
    });

    geocoder = new AMap.Geocoder({});

    map.on("click", (e) => {
      const lnglat = e.lnglat;
      console.log("点击位置的经纬度：", lnglat.getLng() + "," + lnglat.getLat());

      geocoder.getAddress(lnglat, (status, data) => {
        console.log(status);
        console.log(data);
        if (status === "complete" && data.info === "OK") {
     
          const address = data.regeocode.formattedAddress;
          console.log("地点名称：", address);
          if (infowindow) {
            infowindow.close();
          }
          infowindow = new AMap.InfoWindow({
            content: `经纬度：${lnglat}<br>地址：${address}`,
          });
          infowindow.open(map, lnglat);
        } else {
          console.log("获取地址失败：", data);
        }
      });
    });
  });
});

function searchLocation() {
  if (placeSearch && map) {
    placeSearch.search(searchText.value, (status, result) => {
      if (status === "complete" && result.info === "OK") {
        console.log("POI 数据:", result.poiList.pois); 
        if (result.poiList && result.poiList.pois.length > 0) {
          pois.value = result.poiList.pois.map(poi => ({
            ...poi,
            photos: poi.photos || [], 
            address: poi.address || "无地址信息"
          }));
          showSearchPanel.value = true;
        } else {
          console.log("未找到相关地点");
          pois.value = [];
          showSearchPanel.value = false;
        }
      } else {
        console.log("搜索失败：", status);
        pois.value = [];
        showSearchPanel.value = false;
      }
    });
  }
}

function hideSearchPanel() {
  showSearchPanel.value = false;
}

function setCenter(location) {
  map.setCenter([location.lng, location.lat]);
  console.log("点击了搜索结果，移动到：", location);
}
</script>

<style>
#container {
  border-radius: 10px;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 80vh;
}
.main {
  position: relative;
  margin: 20px;
}
.search-panel {
  position: absolute;
  top: 23px;
  left: 320px;
  z-index: 1000;
  width: 300px;
  height: 50vh;
  overflow:auto;
}
.search-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.search-panel li {
  
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
}
.search-panel li div{
  width: 240px;
}
.search-panel li:hover {
  background-color: #f0f9eb; 
}
.search-panel .search-item div {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
</style>